<template>
    <table class="recordTable">
        <tr>
            <th class="tLeft">business</th>
            <th>Revenue / Expense</th>
            <th>Amount</th>
            <th>balance</th>
            <th class="tRight">time</th>
        </tr>
        <tr v-for="dt in lists" :key="dt">
            <td class="tLeft">{{dt.remark}}</td>
            <td>{{dt.direction}} </td>
            <td class="green" v-if="dt.direction=='IN'">+{{dt.amount.decimalTwoString}}</td>
            <td class="red" v-else>-{{dt.amount.decimalTwoString}}</td>
            <td>{{dt.afterAmount.decimalTwoString}}</td>
            <td class="tRight">{{dt.capitalTime}}</td>
        </tr>
        <!-- <tr v-for="dt in 20" :key="dt">
            <td class="tLeft">Task reward</td>
            <td>Revenue </td>
            <td class="green">+{{dt}}</td>
            <td>100</td>
            <td class="tRight">2022.05.15 12:01</td>
        </tr> -->
    </table>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{
        lists:{
            type:Array,
            default:[]
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        onMounted(()=>{
            
        })
        

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .recordTable{
        border-collapse:collapse ;
        border: 0;
        line-height: 24px;
        width: 100%;
        font-size: 18px;
        text-align: center;
        th{
            padding:10px 8px;
            font-family: Inter-Semi Bold, Inter;
            font-weight: normal;
            color: #67F8FF;
            background: rgba(12,132,217,0.5000);
            font-size: 18px;
        }
        td{
            padding: 8px;
            &.green{
                color: #73FF9A ;
            }
            &.red{
                color: #FF5E2B;
            }
        }
        .tRight{
            text-align: right;
        }
        .tLeft{
            text-align: left;
        }
        
    }
</style>